/**
 * Created by maxiaoqiang on 2018/9/11.
 */
import React, {Component} from "react";

import {Select, Table, Button, Tag, Divider, message, Popconfirm, Icon} from 'antd';

import "../index.less";

import {HttpClient} from "util/HttpClient";
import SubjectComponent from "component/subject";
const Option = Select.Option;
class Subject extends Component {

    constructor(props) {
        super(props);
        this.state = {
            editData: null,
            createAndModifyModal: false,
            examCategoryId:"",
            categories: [],
            subjectData:[]
        }
    }

    getColumns = ()=> {
        return ( [
                {
                    title: 'ID',
                    dataIndex: 'id',
                    align: "center"
                }, {
                    title: '名称',
                    dataIndex: 'name',
                    align: "center"
                }, {
                    title: '状态',
                    dataIndex: 'status',
                    align: "center",
                    render: (text, record) => (
                        <span>
                            {record.status == 0 ? <Tag color="blue">启用</Tag> : ''}
                        </span>
                    )
                }, {
                    title: '操作',
                    key: 'action',
                    align: "center",
                    render: (text, record) => (
                        <span>
                            <a
                                href="javascript:;"
                                onClick={()=>{
                                    this.setState({
                                        editData: record,
                                        createAndModifyModal:true
                                    })
                                }}
                            >
                                修改
                            </a>
                            <Divider type="vertical"/>
                            <Popconfirm
                                title="确定要删除吗？"
                                icon={<Icon type="question-circle" theme="outlined" style={{ color: 'red' }}/>}
                                okText="确定"
                                cancelText="取消"
                                onConfirm={()=>{this.confirmDelete(record.id)}}
                            >
                                <a href="javascript:;">删除</a>
                            </Popconfirm>
                        </span>
                    )
                }
            ]
        )
    };

    confirmDelete=(id)=>{
        HttpClient.post("/v1/subject/delete?id="+id)
            .then((response)=> {
                if (response.data.code == 200) {
                    message.success("删除成功");
                    setTimeout(()=>{
                        this.initSubjectListHandle(this.state.examCategoryId);
                    }, 1000)
                }
            })
    };

    componentDidMount() {
        // 获取类别
        this.initCategoryListHandle();
        // 获取科目列表
        this.initSubjectListHandle("");
    }

    handleChange = (value)=> {
        this.setState({
            examCategoryId:value
        });
        this.initSubjectListHandle(value);
    };

    initCategoryListHandle=()=>{
        HttpClient.get("/v1/category/list")
            .then((response)=> {
                if (response.data.code == 200) {
                    let data = [];
                    for (var i in response.data.data) {
                        let newData = response.data.data[i];
                        data.push({
                            id:newData.id,
                            name:newData.name
                        });
                    }
                    this.setState({
                        categories: data
                    })
                }
            });
    };

    initSubjectListHandle=(id)=>{
        HttpClient.get("/v1/subject/"+(id==""?"list":"findByCategory?id="+id))
            .then((response)=> {
                if (response.data.code == 200) {
                    let data = [];
                    for (var i in response.data.data) {
                        let newData = response.data.data[i];
                        newData.key = "subject" + newData.id;
                        data.push(newData);
                    }
                    this.setState({
                        subjectData: data
                    })
                }
            });
    };


    saveHandle = (data)=> {
        let type = data.id==""?"create":"update";
        console.log(data);
        HttpClient.post("/v1/subject/"+type,data)
            .then((res)=>{
                this.setState({
                    createAndModifyModal: false,
                    editData: null
                });
                if(res.data.code==200){
                    if(type=="create"){
                        message.success("创建成功")
                    }else if(type == "update"){
                        message.success("修改成功")
                    }else{
                        message.error(res.data.msg)
                    }
                    setTimeout(()=>{
                        this.initSubjectListHandle(this.state.examCategoryId);
                    }, 1000)
                }
            })
    };

    render() {
        return (
            <div>
                <div className="add-create-btn">
                    <div className="card">
                        { this.state.categories && this.state.categories.length > 0 ?
                            <Select
                                showSearch
                                style={{ width: 200 }}
                                placeholder="请选择类别"
                                optionFilterProp="children"
                                onChange={this.handleChange}
                                onFocus={this.handleFocus}
                                filterOption={(input, option) => option.props.children.indexOf(input) >= 0}
                            >
                                {
                                    this.state.categories.map((item, index)=> {
                                        return (
                                            <Option key={"option_"+item.id} value={item.id}>{item.name}</Option>

                                        )
                                    })
                                }
                            </Select>
                            :
                            null
                        }
                    </div>
                    <div className="card">
                        <Button
                            type="primary"
                            onClick={()=>{
                                this.setState({
                                    createAndModifyModal: true
                                })
                            }}
                        >
                            添加科目
                        </Button>
                    </div>
                </div>
                {this.state.createAndModifyModal ?
                    <SubjectComponent
                        choose={this.state.examCategoryId}
                        categories={this.state.categories}
                        edit={this.state.editData?true:false}
                        data={this.state.editData}
                        commitHandle={this.saveHandle}
                        handleCancel={()=>{
                            this.setState({
                                createAndModifyModal: false,
                            })
                        }}
                    />
                    :
                    null
                }
                <Table
                    columns={this.getColumns()}
                    dataSource={this.state.subjectData}
                />
            </div>
        )
    }
}

export default Subject;